<!--
 * 消息通知
 * @author luguoxiang
 * @date 2023-03-29
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container style="height: 100%">
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-update @click="updateRead()">标记已读</btn-tool-update>
          <btn-tool-remove @click="remove()" />
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-view @click="detailRef.open(row)" />
          <btn-row-remove @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
    <detail ref="detailRef" @ok="reload" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, useTable } from '@/soar';
import schema from './schema';
import api from '@/api/notice';
import Detail from './Detail.vue';

const detailRef = ref();

// 使用表格
const { remove, tableProps, selectedKeys, reload } = useTable<any>({
  api: {
    query: api.currentUserNotice,
    remove: api.removeUserNotice,
  },
  props: {
    orderBys: ['status', '-type', '-datetime'],
    actionbar: {
      width: 100,
    },
  },
});

function updateRead() {
  api.updateRead(selectedKeys.value).then(() => {
    reload();
  });
}
</script>

<style lang="less" scoped>
.lg-table-dict-NoticeTypeEnum {
  border-radius: var(--app-border-radius);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 0 var(--app-space-horizontal);
  &.dict-value-0 {
    color: white;
    background-color: #666;
  }
  &.dict-value-1 {
    color: #888;
    background-color: var(--td-brand-color);
  }
  &.dict-value-2 {
    color: white;
    background-color: var(--td-warning-color);
  }
  &.dict-value-3 {
    color: white;
    background-color: red;
  }
}
.lg-table-dict-NoticeStatusEnum {
  border-radius: var(--app-border-radius);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 0 var(--app-space-horizontal);
  &.dict-value-0 {
    color: white;
    background-color: red;
  }
  &.dict-value-1 {
    color: #888;
    border-color: #888;
  }
}
</style>
